<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心</title>
    <link rel="stylesheet" href="./plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
         #touxiang{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }
        .container {
            background: cornsilk;
        }
        img{
            width: 100%;
        }
        ul{
            border: 0;
        }
        .list-group-item{
            margin-bottom: 0;
            border: 0;
            border-bottom: 1px dashed #ddd;
            background-color: inherit;
        }
        .list2{
            border-bottom: 0;
        }
        .panel-default>.panel-heading {
            color: #e4393c;
            background-color: #f7f7f7;
            border-color: #fff;
        }
        .panel-default {
             border-color: #fff;
        }
        .panel-group .panel-heading+.panel-collapse>.panel-body {
             border-top: 1px solid #fff;
        }
        .save {
            padding: 6px 30px;
        }
    </style>
</head>
<body>
<!--顶部导航-->

    <!-- 导航begin -->
    <div class="container-fluid">
        <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid"> 
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">小巷城</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-home"></span>首页</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-lock"></span>登陆</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-check"></span>注册</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>我的购物车</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>个人中心</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-off"></span>安全退出</a></li> 
                    
                    <!-- 在用框架的使用，任何一个标签都会存在一些样式 -->
                    <li><img src="./images/头像.png" id="touxiang"></li>
                </ul>
            </div>
            </div>
        </nav>
        </div>
    </div>
    <!-- 导航end -->

<!--主体内容-->
<div class="container">
    <div class="row">
        <div class="col-md-3" style="background: #f7f7f7">
            <ul class="list-group">
                <li  class="list-group-item" id="userimg-part"></li>
                <li class="list-group-item">账号设置
                    <ul class="list-group">
                        <li class="list-group-item list2">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">基本信息</a>
                        </li>
                        <li class="list-group-item list2">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">教育资料</a>
                        </li>
                        <li class="list-group-item list2">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">其它信息</a>
                        </li>
                    </ul>
                </li>
                <li class="list-group-item">
                    <a href="order.html">我的订单</a>
                    <ul class="list-group">
                        <li class="list-group-item list2">
                            全部订单
                        </li>
                        <li class="list-group-item list2">
                            <span class="badge">14</span>
                            待付款
                        </li>
                        <li class="list-group-item list2">
                            <span class="badge">14</span>
                            待收货
                        </li>
                        <li class="list-group-item list2">
                            <span class="badge">14</span>
                            待评价
                        </li>
                    </ul>
                </li>
                <li class="list-group-item">我的钱包</li>
                <li class="list-group-item">我的理财</li>
                <li class="list-group-item">地址管理</li>
                <li class="list-group-item">安全设置</li>
            </ul>
        </div>
        <div class="col-md-8">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                基本信息
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <div class="col-md-offset-1 col-md-7">
                                <form class="form-horizontal" style="margin-top: 40px">
                                    <div class="form-group">
                                        <label for="input1" class="col-md-3 control-label">用户名</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input1" placeholder="用户名">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input2" class="col-md-3 control-label">密码</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input2" placeholder="密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input3" class="col-md-3 control-label">手机号</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input3" placeholder="手机号">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input4" class="col-md-3 control-label">地址</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input4" placeholder="地址">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input5" class="col-md-3 control-label">邮箱</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input5" placeholder="邮箱">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-3 col-sm-8">
                                            <button type="button" class="btn btn-success save">重置</button>
                                            <button type="button" class="btn btn-success save">保存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                教育资料
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            <div class="col-md-offset-1 col-md-7">
                                <form class="form-horizontal" style="margin-top: 40px">
                                    <div class="form-group">
                                        <label for="input1" class="col-md-3 control-label">用户名</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input6" placeholder="用户名">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input2" class="col-md-3 control-label">密码</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input7" placeholder="密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input3" class="col-md-3 control-label">手机号</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input8" placeholder="手机号">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input4" class="col-md-3 control-label">地址</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input9" placeholder="地址">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input5" class="col-md-3 control-label">邮箱</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input10" placeholder="邮箱">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-3 col-sm-8">
                                            <button type="button" class="btn btn-success save">重置</button>
                                            <button type="button" class="btn btn-success save">保存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                其它信息
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            <div class="col-md-offset-1 col-md-7">
                                <form class="form-horizontal" style="margin-top: 40px">
                                    <div class="form-group">
                                        <label for="input1" class="col-md-3 control-label">用户名</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input11" placeholder="用户名">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input1" class="col-md-3 control-label">密码</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input12" placeholder="密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input1" class="col-md-3 control-label">手机号</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input13" placeholder="手机号">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input1" class="col-md-3 control-label">地址</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input14" placeholder="地址">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="input1" class="col-md-3 control-label">邮箱</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="input15" placeholder="邮箱">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-3 col-sm-8">
                                            <button type="button" class="btn btn-success save">重置</button>
                                            <button type="button" class="btn btn-success save">保存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./plugins/bootstrap-3.3.7-dist/js/jquery-1.11.0.min.js"></script>
<script src="./plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $("#top-part").load("top-part.html");
    $("#search-part").load("search-part.html");
    $("#userimg-part").load("userimg-part.html");
</script>
</html>